<template>
  <div class="permission-container">
    <el-card class="margintop20">
      <el-form :model="rootForm">
        <el-form-item
          label="权限名"
          label-width="auto"
          style="display: inline-block"
        >
          <el-input
            @keyup.native.enter="addRootPermission"
            v-model.trim="rootForm.name"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="权限值"
          label-width="auto"
          style="display: inline-block"
        >
          <el-input
            @keyup.native.enter="addRootPermission"
            v-model.trim="rootForm.code"
          ></el-input>
        </el-form-item>
        <el-button type="primary" @click="addRootPermission"
          >添加根权限</el-button
        >
      </el-form>
    </el-card>
    <el-card class="margintop20">
      <el-table
        :data="showList"
        style="width: 100%; margin-bottom: 20px"
        row-key="id"
        border
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        :default-expand-all="false"
        :row-class-name="tableRowClassName"
      >
        <el-table-column
          prop=""
          label="序号"
          sortable
          width="80"
          type="index"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="name" label="名称" sortable width="180">
        </el-table-column>
        <el-table-column prop="code" label="权限值"> </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button
              icon="el-icon-plus"
              type="primary"
              title="添加子权限"
              size="mini"
              @click="addChildrenPermission(row)"
            ></el-button>
            <el-button
              icon="el-icon-edit"
              title="修改权限"
              type="warning"
              size="mini"
              @click="editPermission(row)"
            ></el-button>
            <el-popconfirm
              @onConfirm="delPermission(row.id)"
              style="margin-left: 10px"
              title="确定删除吗?"
            >
              <template #reference>
                <el-button
                  icon="el-icon-delete"
                  title="删除该权限"
                  type="danger"
                  size="mini"
                ></el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 添加,修改权限 -->
    <el-dialog :visible.sync="showDialog" @closed="closeDialog">
      <el-form>
        <el-form-item label="父权限名称" v-show="form.pname">
          <el-input disabled :value="form.pname"></el-input>
        </el-form-item>
        <el-form-item label="权限名">
          <el-input
            v-model.trim="form.name"
            @keyup.native.enter="savePermission"
          ></el-input>
        </el-form-item>
        <el-form-item label="权限值">
          <el-input
            v-model.trim="form.code"
            @keyup.native.enter="savePermission"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <div class="right">
            <el-button type="primary" @click="savePermission">保存</el-button>
            <el-button type="" @click="showDialog = false">取消</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-backtop target=".app-main" :visibility-height="200"></el-backtop>
  </div>
</template>

<script>
//表格样式
var colorNum = { value: 0 }
export default {
  data() {
    return {
      // 添加,修改权限
      showDialog: false,
      form: {
        code: '',
        level: 0,
        name: '',
        pid: '',
        toCode: '',
        type: 1,
        pname: ''
      },
      //添加根权限
      rootForm: {
        code: '',
        level: 2,
        name: '',
        pid: '1',
        toCode: '',
        type: 1
      },
      //
      showList: [],
      rootList: [],
    }
  },
  methods: {
    // 删除该权限
    async delPermission(id) {
      const res = await this.$API.permission.delPermission(id)
      if (res.ok) {
        this.$message({ type: 'success', message: '删除成功' })
        this.getShowList()
      } else {
        this.$message({
          type: 'error',
          message: res.message + ':' + (res.data || '')
        })
      }
    },
    closeDialog() {
      // 清空数据
      this.form = {
        code: '',
        level: 0,
        name: '',
        pid: '',
        toCode: '',
        type: 1,
        pname: ''
      }
    },
    // 点击修改权限
    editPermission(row) {
      // 不要直接修改展示数据
      this.form = JSON.parse(JSON.stringify(row))
      this.showDialog = true
    },
    // 添加,修改权限--保存
    async savePermission() {
      let ok = await this.addOrEditPermission(this.form)
      if (ok) {
        this.showDialog = false
      }
    },
    // 点击添加子权限
    addChildrenPermission(row) {
      this.form.pid = row.id
      this.form.pname = row.name
      this.form.level = parseInt(row.level) + 1
      this.showDialog = true
    },
    // 添加根权限
    async addRootPermission() {
      const { rootForm } = this
      let ok = await this.addOrEditPermission(rootForm)
      if (ok) {
        this.rootForm.name = ''
        this.rootForm.code = ''
      }
    },
    //添加权限
    async addOrEditPermission(data) {
      if (!data.name || !data.code) {
        this.$message({ type: 'warning', message: '数据不完整' })
        return false
      }

      const res = await this.$API.permission.addOrEditPermission(data)
      if (res.ok) {
        this.$message({
          type: 'success',
          message: data.id ? '修改成功' : '添加成功'
        })
        // 跟新数据
        this.getShowList()
        return true
      } else {
        this.$message({ type: 'error', message: res.message + ':' + res.data })
        return false
      }
    },
    // 表格,根权限高亮
    tableRowClassName: ({ row, rowIndex }) => {
      if (row.level == 2) {
        colorNum.value++
        if (colorNum.value % 2 == 0) return 'success-row'
        else return 'warning-row'
      } else return ''
    },
    //获取展示数据
    async getShowList() {
      const res = await this.$API.permission.getShowList()
      if (res.ok) {
        this.showList = res.data.children[0].children
      } else {
      }
    }
  },
  created() {
    this.getShowList()
  }
}
</script>

<style>
.width30 {
  width: 30%;
}

.margintop20 {
  margin-top: 20px;
}

.margintop10 {
  margin-top: 10px;
}

.el-table .success-row {
  background: #f0f9eb;
}

.el-table .warning-row {
  background: oldlace;
}
.right {
  position: absolute;
  right: 0;
}
</style>
